{% extends 'base.html' %}
{% block content %}

<style>
        .sousuo{
            height: 75px;
            width: 320px;
            background-color: #563d7c;
            position: absolute;
            top: 0;
            right: -20px;
        }
        .sousuo input{
            width: 200px;
            color: #4e4a4a;
            margin: 15px;
            line-height: 40px;
            border-radius: 5px;
            border: 0;
        }
        .sousuo button{
            color: white;
            border-radius: 5px;
            height: 40px;
            width: 60px;
            border: solid 1px transparent;
            background-color: #006fff;
        }
        .tuij{
            height: 280px;
            width: 320px;
            background-color: #ffffff;
            position: absolute;
            top: 90px;
            right: -20px;
        }
        .tuij1{
            height: 280px;
            width: 320px;
            background-color: #ffffff;
            position: absolute;
            top: 390px;
            right: -20px;
        }
        .wz{
            color: white;
            background-color: black;
            height: 45px;
            border-bottom: solid 1px red;
            line-height: 45px;
            padding-left: 10px;
        }
        .article-detail{
            border: solid 1px #cccccc;
            margin: 0px;
            background-color: whitesmoke;
            padding: 0 10px 0 20px;
        }
        .article-detail .title{
            font-size: 24px;
            color: #e56244;
            margin-top: 30px;
        }
        .article-detail .favorite{
            margin: 30px 0;
            padding-top: 5px;
            text-align: right;
        }
        .article-detail .favorite label{
            font-weight: normal;
            color: #337ab7;
            cursor: pointer;
        }
        .article-detail .info{
            font-size: 14px;
            color: #666666;
            padding-bottom: 20px;
            border-bottom: solid 1px #cccccc;
            margin-bottom: 20px;
        }
        .article-detail .content{
            font-size: 16px;
            word-break: break-all;
            word-wrap: break-word;
        }
        .article-detail .content img{
            border: solid 1px #999999;
            display: block;
            max-width: 100%;
            height: auto;
        }
        .article-nav{
            border: solid 1px #cccccc;
            margin: 10px 0;
            background-color: whitesmoke;
            padding: 10px 10px 10px 20px;
            line-height: 35px;
        }
        .article-comment{
            border: solid 1px #cccccc;
            margin: 10px 0;
            background-color: whitesmoke;
            padding: 20px 0 10px 10px;
            line-height: 35px;
        }
        .article-comment .list{
            margin: 0 0 10px 0;
            border-top: solid 1px #cccccc;
            padding-top: 10px;
        }
        .article-comment .list .icon{
            margin: 0;
            padding-top: 10px;
        }
        .article-comment .list .comment{
            padding: 0 0;
        }
        .article-comment .list .comment .commenter{
            font-size: 14px;
            color:#666666;
        }
        .article-comment .list .comment .content{
            font-size: 16px;
            padding-left: 0;
        }
        .article-comment .list .comment .reply{
            text-align: right;
        }
        .article-comment .list .comment .reply label{
            font-weight: normal;
            color: #337ab7;
            cursor: pointer;
        }
        ol li{
            height: 30px;
            line-height: 30px;
        }
</style>
<body>
<div class="col-sm-9 col-12" style="padding: 0 10px; margin: 0 auto" id="left">
    <div class="col-12 article-detail row">
        <div class="col-9 title">
            {{ article.headline }}
        </div>
        <div class="col-3 favorite">
            <span>收藏文本</span>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 info">
            作者：{{ article.nickname }}&nbsp;&nbsp;&nbsp;类别：{{ article.type }}&nbsp;&nbsp;&nbsp;
            日期：{{ article.updatetime }}&nbsp;&nbsp;&nbsp;阅读：{{ article.readcount }}次&nbsp;&nbsp;&nbsp;消耗积分：{{ article.credit }}分
        </div>
        <div class="col-12 content" id="content">
            {{ article.content | safe }}
        </div>

        <div class="col-12 favorite" style="margin: 30px 0;">
            <label>
                <span class="oi oi-task" aria-hidden="true"></span>编辑内容
            </label>
            &nbsp;&nbsp;&nbsp;
            <label>
                <span class="oi oi-heart" aria-hidden="true"></span>收藏文本
            </label>
        </div>
    </div>
    <div class="col-12 article-nav">
    <div>版权所有，转载本网站文章请注明出处：蜗牛笔记，</div>
    <div>上一篇：
        <a href="#">Python中利用装饰器实现复杂函数功能</a>
    </div>
    <div>下一篇：
        <a href="#">Python中多线程在测试和开发中应用</a>
    </div>
</div>

<div class="col-12 article-comment" id="commenttop">
    <div class="col-12 row add-comment">
        <div class="col-sm-2 col-12">
            <label for="nickname">你的昵称：</label>
        </div>
        <div class="col-sm-10 col-12" style="padding: 0 0 0 10px;">
            <input type="text" class="form-control" id="nickname" readonly/>
        </div>

        <div class="col-sm-2 col-12">
            <label for="comment">你的评论：</label>
        </div>
        <div class="col-sm-10 col-12" style="padding: 0 0 0 10px;">
            <textarea id="comment" class="form-control"></textarea>
        </div>
        </div>
    <div class="col-12 row" style="margin-bottom: 20px">
    <div class="col-2"></div>
    <div class="col-sm-8 col-12" style="text-align: left;color: #888888;">
        提示：登录后添加有效评论可获得积分哦！
    </div>
    <div class="col-sm-2 col-12" style="text-align: right">
        <button type="button" class="btn btn-primary">提交评论</button>
    </div>
</div>
</div>

<div class="col-12 list row">
    <div class="col-2 icon">
        <img src="/" class="img-fluid" style="width: 70px;"/>
    </div>
    <div class="col-12 row" style="padding: 0">
        <div class="col-7 commentter">
            强哥&nbsp;&nbsp;&nbsp;2020-02-06 15:58:10
        </div>
        <div class="col-5 reply">
            <label>
                <span class="oi oi-chevton-bottom" aria-hidden="true">
                    </span>赞成(<span>25</span>)
            </label>&nbsp;&nbsp;&nbsp;
            <label>
                <span class="oi oi-chevton-bottom" aria-hidden="true">
                    </span>反对(<span>13</span>)
            </label>
        </div>
    </div>
    <div class="col-12 content">
        感谢作者的无私奉献，这是一条真诚表达感谢的评论;
    </div>
</div>
</div>



<!--<div class="ss">-->
<!--    <div class="sousuo">-->
<!--        <input type="text" placeholder="请输入关键字" id="searchInput">-->
<!--        <button onclick="searchDate()">搜索</button>-->
<!--    </div>-->
<!--</div>-->
<!--<div class="tuij">-->
<!--<div class="wz">最新文章</div>-->
<!--    <ol>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--    </ol>-->
<!--</div>-->
<!--<div class="tuij1">-->
<!--<div class="wz">特别推荐</div>-->
<!--    <ol>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--    </ol>-->
</div>
</body>
{% endblock %}